<template>
  <div class="question-records-container" v-if="records.length > 0">
    <div class="question-records-list">
      <div v-for="record in records" :key="record.id" class="message">

        <!-- 用户提问 -->
        <div class="message-content user-message-content">
          <div class="spacer"></div>
          <div class="message-text user-message-text">{{ record.question }}</div>
          <div class="message-avatar">
            <a-avatar>我</a-avatar>
          </div>
        </div>
        <div class="message-time user-message-time">{{ formatDateTime(record.question_time || record.created_at)
          }}</div>

        <!-- AI回答 -->
        <div class="message-content">
          <div class="message-avatar">
            <a-avatar>AI</a-avatar>
          </div>
          <div class="message-text assistant-message-text">

            <div v-html="renderMarkdown(record.answer || '')"></div>

            <!-- 知识引用 -->
            <div v-if="record.used_knowledge_entries">
              <!-- <div class="knowledge-references-list"> -->
              <div v-for="(values, key) in record.used_knowledge_entries" :key="key"
                class="knowledge-references knowledge-reference-item">
                <file-pdf-outlined class="pdf-icon" />
                <span>{{ key + 1 }}. {{ values.citation_line }}</span>
                <!-- </div> -->
              </div>
            </div>


          </div>
          <div class="spacer"></div>

        </div>


        <div class="message-time">{{ formatDateTime(record.answer_time || record.updated_at) }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
import MarkdownIt from 'markdown-it'
import type { QuestionRecord } from '@/api/chat'
import { FilePdfOutlined } from '@ant-design/icons-vue'

const props = defineProps<{
  records: QuestionRecord[]
}>()

const md = new MarkdownIt({
  html: true,
  linkify: true,
  typographer: true,
  breaks: true
})

// Markdown渲染函数，添加对引用标记的处理
const renderMarkdown = (content: string): string => {
  if (!content) return ''

  // 首先进行常规的Markdown渲染
  let rendered = md.render(content)

  // 使用正则表达式匹配 [^1] 或 [^n] 格式的引用标记
  rendered = rendered.replace(/\[\^(\d+)\]/g, (match, num) => {
    return `<span class="citation-mark">${num}</span>`
  })

  return rendered
}

// 格式化日期时间函数
const formatDateTime = (dateTimeStr: string): string => {
  if (!dateTimeStr) return '';
  try {
    const date = new Date(dateTimeStr);
    return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}:${padZero(date.getSeconds())}`;
  } catch (error) {
    console.error('日期格式化错误:', error);
    return dateTimeStr;
  }
}

// 补零函数
const padZero = (num: number): string => {
  return num < 10 ? `0${num}` : `${num}`;
}
</script>

<style scoped>
.question-records-container {
  margin-bottom: 16px;
}

.question-records-list {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 16px;
}

.message {
  margin-bottom: 16px;
}

.message-content {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.user-message-content {
  justify-content: flex-end;
}

.spacer {
  flex: 1;
}

.message-avatar {
  flex-shrink: 0;
  margin-top: 5px;
}

.message-text {
  flex: 0 1 auto;
  padding: 12px;
  border-radius: 8px;
  max-width: 70%;
}

.user-message-text {
  background-color: #1890ff;
  color: white;
}

.assistant-message-text {
  background-color: white;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  text-align: left;
}

.user-message-time {
  text-align: right;
}

/* Markdown样式 */
:deep(.markdown-content) {
  line-height: 1.6;
}

:deep(.markdown-content h1),
:deep(.markdown-content h2),
:deep(.markdown-content h3),
:deep(.markdown-content h4),
:deep(.markdown-content h5),
:deep(.markdown-content h6) {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

:deep(.markdown-content h1) {
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

:deep(.markdown-content h2) {
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
  padding-bottom: 0.3em;
}

:deep(.markdown-content h3) {
  font-size: 1.25em;
}

:deep(.markdown-content h4) {
  font-size: 1em;
}

:deep(.markdown-content p) {
  margin-top: 0;
  margin-bottom: 16px;
}

:deep(.markdown-content blockquote) {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
  margin: 0 0 16px 0;
}

:deep(.markdown-content ul),
:deep(.markdown-content ol) {
  padding-left: 2em;
  margin-bottom: 16px;
}

:deep(.markdown-content code) {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

:deep(.markdown-content pre) {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

:deep(.markdown-content pre code) {
  background-color: transparent;
  padding: 0;
}

:deep(.markdown-content table) {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 16px;
}

:deep(.markdown-content table th),
:deep(.markdown-content table td) {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

:deep(.markdown-content table tr) {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

:deep(.markdown-content table tr:nth-child(2n)) {
  background-color: #f6f8fa;
}

.knowledge-references {
  margin-top: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  padding: 10px;
}

.knowledge-references-title {
  display: flex;
  align-items: center;
  color: #1890ff;
  font-weight: 500;
  margin-bottom: 8px;
  font-size: 14px;
}

.knowledge-references-title span {
  margin-left: 6px;
}

/*
.knowledge-references-list {
  padding-left: 8px;
} */

.knowledge-reference-item {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
  font-size: 13px;
  color: #666;
  padding-left: 8px;
}

.pdf-icon {
  color: #ff4d4f;
  margin-right: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

/* 引用标记样式 */
:deep(.citation-mark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #f0f0f0;
  color: #666;
  font-size: 12px;
  margin: 0 2px;
  vertical-align: text-top;
  cursor: pointer;
  transition: background-color 0.2s;
}

:deep(.citation-mark):hover {
  background-color: #e0e0e0;
}
</style>